<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<!--link href="apple-touch-icon.png" rel="apple-touch-icon" /-->
	<link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no">
	<link rel="apple-touch-startup-image" href="startup.png" /><!-- 320 x 460 -->
	<title>Flood</title>
	<script type="text/javascript" charset="utf-8" src="../jquery1_5_1.js"></script>
	<script type="text/javascript" charset="utf-8" src="floodjs.js"></script>
	<link rel="stylesheet" type="text/css" href="floodstyle.css" media="screen" charset="utf-8" />
	<script type="text/javascript">
		touchMove = function(event) {
		// Prevent scrolling on this element
		event.preventDefault();
		}
	</script>
</head>
<body>
	<!--div id="banner">
	
	</div>
	<div id="menus">
		how to play | about | etc...
	</div-->
	<div id="wrap" ontouchmove="touchMove(event);">
		<div id="console" >
			<div id="gameboard">
				<div class='blackoverlay' id='fade'>
			
				</div>
			</div> 
			<div id="controlpane">
				<a href="#"><div class='moves' id="bluecont" onclick='move("blue");'></div></a>
				<a href="#"><div class='moves' id="redcont" onclick='move("red");'></div></a>
				<a href="#"><div class='moves' id="yellowcont" onclick='move("yellow");'></div></a>
				<a href="#"><div class='moves' id="purplecont" onclick='move("purple");'></div></a>
				<a href="#"><div class='moves' id="orangecont" onclick='move("orange");'></div></a>
				<a href="#"><div class='moves' id="greencont" onclick='move("green");'></div></a>
			</div>
		</div>
		<div id="bottom">
			<a href="#" onclick='startGame(0);'>
				<div class="nav" id="start">
				</div>
			</a>
			<a href="#" onclick='restartGame(false);'>
				<div class="nav" id="restart">
				</div>
			</a>
			<div class="nav" id="movecont">
				<div id="counter">
					<p id="word">move</p>
					<p id="movestring"></p>
					<!--div id="playermoves"></div><div>of</div><div id="maxmoves"></div-->
				</div>
				<!--p>moves</p-->
			</div>
			<a href="#" onclick='showOptions();'>
				<div class="nav" id="option"></div>
			</a>
		</div>

		<div class='whitecontent' id='options'>
			<p>board size</p>	
			<a href='#' onclick='changeSize(0);'><div>small</div></a>
			<a href='#' onclick='changeSize(2);'><div>large</div></a>
			<br /><br />
			<a href='#' onclick='cancel();'>cancel</a>
		</div>
		<div class='whitecontent' id='msgbox'>
			<p></p> 
			<a href='#' onclick='restartGame(true);'>Please click here to play again</a>
		</div>	

	</div>
</body>
</html>
